<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
<!--自动检测屏幕大小-->		
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">		
		
		<title></title>
		<link rel="stylesheet" type="text/css" href="js/bootstrap.css"/>
		<script src="js/jquery-3.2.0.min.js"></script>
		<script src="js/bootstrap.js"></script>
		
		
	</head>
	<body class="container">
		<h3 class="page-header text-center">媒体对象</h3>
		<p>这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。</p>
		
		
<!--*********************************************************************************-->		
		<div class="media">
			<div class="media-left">
				<div class="media-object" >
					<img src="img/2.png">
				</div>
			</div>
			<div class="media-body">
				<h3 class="media-heading">..media-heading</h3>
				<p>回复回复回复回复回复回复回复回复回复回复回复回复回复回复回复回复</p>
			</div>
		</div>
		
		
<!--*********************************************************************************-->		
		<div class="media">
			<div class="media-left">
				<div class="media-object" >
					<img src="img/2.png">
				</div>
			</div>
			<div class="media-body">
				<h3 class="media-heading">..media-heading</h3>
				<p>..dedia-left 图片靠左</p>
				<p>..dedia-right 图片靠右</p>
			</div>
			<div class="media-right">
				<div class="dedia-boject">
					<img src="img/2.png"/>
				</div>
				
			</div>
			
		</div>


<!--**********************************************************************************-->
		<div class="media">
			<div class="media-left">
				<div class="media-object" >
					<img src="img/2.png">
				</div>
			</div>
			<div class="media-body">
				<h3 class="media-heading">..media-heading</h3>
				<p>回复回复回复回复回复回复回复回复回复回复回复回复回复回复回复回复</p>
				
				<!--***********************************-->
				<div class="media">
                    <div class="media-left">
                        <div class="media-object" >
                            <img src="img/2.png">
                        </div>
                    </div>
                    <div class="media-body">
                        <h3 class="media-heading">第二层回复</h3>
                        <p>直接放在上一层的 ..media-body 中</p>
                    </div>
		        </div>
		        <!--***********************************-->
		
				
			</div>
		</div>
		
		<hr />
		
		
<!--*********************************************************************************-->		
		<p>对齐</p>
		
		<div class="media">
			<div class="media-left media-middle">
				<div class="media-object" >
					<img src="img/2.png">
				</div>
			</div>
			<div class="media-body">
				<h3 class="media-heading">..media-heading</h3>
				<p>..media-middle 图片居中</p>
				<p>..media-middle 图片居中</p>
				<p>..media-middle 图片居中</p>
				<p>..media-middle 图片居中</p>
				<p>..media-middle 图片居中</p>
				<p>..media-middle 图片居中</p>
				<p>..media-middle 图片居中</p>
				<p>..media-middle 图片居中</p>
			</div>
		</div>
				
				
				
		<hr />		
<!--*********************************************************************************-->		
		<div class="media">
			<div class="media-left media-bottom">
				<div class="media-object" >
					<img src="img/2.png">
				</div>
			</div>
			<div class="media-body">
				<h3 class="media-heading">..media-heading</h3>
				<p>..media-bottom 图片局底</p>
				<p>..media-bottom 图片局底</p>
				<p>..media-bottom 图片局底</p>
				<p>..media-bottom 图片局底</p>
				<p>..media-bottom 图片局底</p>
				<p>..media-bottom 图片局底</p>
				<p>..media-bottom 图片局底</p>
				<p>..media-bottom 图片局底</p>
			</div>
		</div>
		
		
	</body>
</html>
